<template>
  <div>
    <div style="overflow: hidden">
      <div key="item.id" style="float: left">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>
            <a data="">回收站</a>
          </el-breadcrumb-item>
          <el-breadcrumb-item></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <!-- 卡片区域 -->
    <el-card>
      <!-- 展示列表 -->
      <el-table :data="musicList" border stripe>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="文件">
          <template slot-scope="scope">
            <div v-if="scope.row.isDirectory === 1">
              <i
                class="el-icon-folder-opened"
                style="color: green; font-size: 200%"
                @click="sonFileList(scope.row.filePath)"
              ></i>
              <span @click="sonFileList(scope.row.filePath)">{{
                scope.row.fileName
              }}</span>
            </div>
            <div v-else>
              <i
                class="el-icon-takeaway-box"
                style="color: green; font-size: 200%"
              ></i>
              {{ scope.row.fileName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="路径" prop="filePath"></el-table-column>
        <el-table-column label="大小" prop="fileSize"></el-table-column>
        <el-table-column label="时间" prop="fileTime"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 还原 -->
            <el-button
              style="margin-left: 2px"
              @click="restore(scope.row.filePath)"
              v-model="scope.row.id"
              type="success"
              icon="el-icon-refresh-left"
              size="mini"
            ></el-button>
            <!-- 永久删除 -->
            <el-button
              style="margin-left: 2px"
              @click="deleteFile(scope.row.filePath)"
              v-model="scope.row.filePath"
              type="danger"
              icon="el-icon-delete"
              size="mini"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[5, 8]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 5,
        basepath: "/" + window.sessionStorage.getItem("token"),
      },
      searchfilename: "",
      musicList: [],
      filePathList: [],
      filepath: "/" + window.sessionStorage.getItem("token"),
      total: 0,
    };
  },
  created() {
    this.getMusicList();
  },
  methods: {
    async getMusicList() {
      const { data: res } = await this.$http.get(
        "rubbishListsFiles?filepath=" + this.filepath
      );

      if (res.code != 200) return this.$message.error("获取用户列表失败");
      // 赋值
      this.musicList = res.data.slice(
        (this.queryInfo.pagenum - 1) * this.queryInfo.pagesize,
        this.queryInfo.pagenum * this.queryInfo.pagesize
      );
      this.total = res.total;
    },
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.getMusicList(this.filepath);
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      this.getMusicList(this.filepath);
    },
    // 删除
    deleteFile(deleteFilepath) {
      const that = this;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          that.$http
            .get("deleteRubbishFiles?deleteFilepath=" + deleteFilepath)
            .then(function (res) {
              that.getMusicList(that.filepath);
            });

          this.$message({
            type: "success",
            message: "永久删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //还原
    restore(deleteFilepath) {
      const that = this;
      this.$confirm("此操作将还原该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          that.$http
            .get("restoreFiles?deleteFilepath=" + deleteFilepath)
            .then(function (res) {
              that.sonFileList(that.filepath);
            });
          this.$message({
            type: "success",
            message: "还原成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消还原",
          });
        });
    },
  },
};
</script>

<style lang="less" scoped>
</style>

